<template>
	<page-meta :root-font-size="fontSize"></page-meta>
	<view>
		<!-- <h-page-meta></h-page-meta> -->
		<view class="mg-30 pd-30 bg-FF fs-34 border-r-20 " style="text-align: center;" hover-class="u-hover-class" @click="add()">+添加乘客</view>
		<view class="mg-30 pd-30 mg-top-20 pd-bottom-40 flex flex-ac flex-bt bg-FF border-r-20" v-for="(item, index) in passengerArr" :key="index" style="position: relative">
			<view class="fc-666 " @click="showMark(index)">
				<view class="flex flex-ac">
					<view class="fs-36 fw-700 fc-main">{{ item.Name }}</view>
					<!-- <view class="fs-26" style="padding: 0 40rpx;">{{ item.sex }}</view> -->
					<view class="fs-26">{{ item.type }}</view>
				</view>
				<view class="flex flex-ac mg-top-40 fs-28 ">
					<view class="ellipsis" style="padding-right: 30rpx;width: 150rpx;">{{ idCardChange(0, item.IDCard) }}</view>
					<view class="ellipsis" style="width: 400rpx;">{{ idCardChange(1, item.IDCard) }}</view>
				</view>
				<view class="flex flex-ac  fs-28" style="margin-top: 30rpx;">
					<view class="ellipsis" style="padding-right: 30rpx;width: 150rpx;">联系电话</view>
					<view class="ellipsis" style="width: 400rpx;">{{ $h.method.getPhoneTurn(item.PhoneNumber) }}</view>
				</view>
			</view>
			<view class="checkbox" :class="item.checked ? 'checkbox-activite' : ''" @click="selected(index)"><u-icon name="checkmark" color="#FFF" size="32"></u-icon></view>
			<view class="flex flex-ac flex-jc v-mark" @click="hiddenMark" v-if="item.show">
				<view class="v-edit" @click="edit(item)">编辑</view>
				<view class="v-del" @click="del(item.AID)">删除</view>
			</view>
		</view>
		<view :style="{ height: btHeight + 10 + 'px' }"></view>
		<view style="position: fixed;bottom: 0; left: 0;right: 0;padding: 0 30rpx  50rpx 30rpx;background-color: #F5F9FC;" id="bt">
			<view class="bg-main fc-f fs-34 pd-30" hover-class="u-hover-class" style="text-align: center;border-radius: 200rpx;" @click="submit">确定</view>
		</view>
	</view>
</template>

<script>
var _self;
var app = getApp().globalData;
export default {
	data() {
		return {
			passengerArr: [],
			btHeight: 76,
			showIndex: -1,
			selsecredPerson: [], //已选择的人员数据
			userInfo: [],
			fontSize: '' //字体大小
		};
	},
	mounted() {
		var that = this;
		const query = uni.createSelectorQuery().in(this);
		query
			.select('#bt')
			.boundingClientRect(data => {
				that.btHeight = data.height;
			})
			.exec();
	},
	onShow() {
		uni.getStorage({
			key: 'userInfo',
			success: function(res) {
				console.log('用户信息', res.data);
				_self.userInfo = res.data;
				uni.startPullDownRefresh();
			},
			fail: function() {
				uni.navigateTo({
					url: '../../pages/Login/Login'
				});
			}
		});
	},
	onLoad() {
		_self = this;
		//设置页面字体大小
		_self.fontSize = app.fontSize;
		this.selsecredPerson = uni.getStorageSync('personList') || [];
	},
	onPullDownRefresh() {
		this.hiddenMark();
		this.GetContactsInfoByID();
	},
	methods: {
		add() {
			//***************提交前把编辑、删除键隐藏了***************//
			this.hiddenMark();
			uni.navigateTo({
				url: './AddPassenger'
			});
		},
		edit(e) {
			//***************提交前把编辑、删除键隐藏了***************//
			this.hiddenMark();
			var item = e;
			this.$set(item, 'IDCardType', this.idCardChange(0, item.IDCard));
			this.$set(item, 'IDCard', this.idCardChange(1, item.IDCard, true));
			uni.navigateTo({
				url: './AddPassenger?item=' + encodeURIComponent(JSON.stringify(item))
			});
		},
		del(id) {
			this.hiddenMark();
			var that = this;
			uni.request({
				url: that.$h.expressInterface.expressInterface.GetContactsDeleteByID.url,
				method: that.$h.expressInterface.expressInterface.GetContactsDeleteByID.method,
				data: {
					objContactsId: id
				},
				success(res) {
					if (res.data.Success) {
						console.log('删除',res);
						//删除后也删除缓存中该条数据
						if (that.selsecredPerson.length > 0) {
							var arr = [];
							that.selsecredPerson.map(function(item) {
								if (item.AID != id) {
									arr.push(item);
								}
							});
							uni.setStorageSync('personList', arr);
						}
						//删除后重新获取数据
						uni.startPullDownRefresh();
						_self.GetContactsInfoByID();
					} else {
						that.$u.toast('删除失败');
					}
				},
				fail() {
					that.$u.toast('网络异常');
				}
			});
		},
		/*
		 *选择乘车忍触发条件
		 */
		selected(e) {
			this.hiddenMark();
			this.$set(this.passengerArr[e], 'checked', !this.passengerArr[e].checked);
		},
		showMark(e) {
			this.$set(this.passengerArr[e], 'show', true);
			if (this.showIndex != -1) {
				this.$set(this.passengerArr[this.showIndex], 'show', false);
			}
			this.showIndex = e;
		},
		hiddenMark() {
			console.log(111);
			//***************提交前把编辑、删除键隐藏了***************//
			if (this.showIndex != -1) {
				this.$set(this.passengerArr[this.showIndex], 'show', false);
			}
			this.showIndex = -1;
			//***************提交前把编辑、删除键隐藏了***************//
		},
		submit() {
			var arr = [];
			//***************提交前把编辑、删除键隐藏了***************//
			this.hiddenMark();
			this.passengerArr.map(function(item) {
				if (item.checked) {
					arr.push(item);
				}
			});
			uni.setStorageSync('personList', arr);
			setTimeout(function() {
				uni.navigateBack();
			}, 500);
		},
		/**
		 * 把证件号和证件类型转换，拆分出来
		 * @param {int} type 0代表证件类型，1代表证件号
		 */
		idCardChange(type, item, bol) {
			if (type == 0) {
				if (item == null) return '身份证';
				
				// let regs = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; //身份证
				// if (regs.test(item)) {
				// 	return '身份证';
				// }
				// regs = /^[a-zA-Z0-9]{6,10}$/; //港澳通行证
				// if (regs.test(item)) {
				// 	return '港澳通行证';
				// }
				// regs = /^\\d{8}|^[a-zA-Z0-9]{10}|^\\d{18}$/ //台湾通行证
				// if (regs.test(item)) {
				// 	return '台湾通行证';
				// }
				// regs =/(^[EeKkGgDdSsPpHh]\d{8}$)|(^(([Ee][a-fA-F])|([DdSsPp][Ee])|([Kk][Jj])|([Mm][Aa])|(1[45]))\d{7}$)/; //护照（包括香港和澳门）
				// if (regs.test(item)) {
				// 	return '护照';
				// }
				if (item.indexOf(',') == -1) {
					return '身份证';
				} else {
					var arr = item.split(',');
					return arr[0];
				}
			}
			if (type == 1) {
				if (item == null) return '';
				if (item.indexOf(',') == -1) {
					if (bol) {
						return item;
					} else {
						return item.substr(0, 6) + '******' + item.substr(item.length - 3, item.length);
					}
				} else {
					var arr = item.split(',');
					if (bol) {
						return arr[1];
					} else {
						return arr[1].substr(0, 6) + '******' + arr[1].substr(arr[1].length - 3, arr[1].length);
					}
				}
			}
		},
		/**
		 * 手机号加*号
		 */
		phoneChange(str) {
			if (str == null || str == '') return '';
			return str.substr(0, 3) + '******' + str.substr(str.length - 3, str.length);
		},
		/**
		 * 查询乘车人信息
		 */
		GetContactsInfoByID() {
			var that = this;
			uni.request({
				url: that.$h.expressInterface.expressInterface.GetContactsInfoByID.url,
				method: that.$h.expressInterface.expressInterface.GetContactsInfoByID.method,
				data: {
					clientId: _self.userInfo.Id
				},
				success(res) {
					if (res.data.Success) {
						that.passengerArr = JSON.parse(res.data.Data);
					} else {
						that.$u.toast('查询失败');
					}
				},
				fail() {
					that.$u.toast('网络异常');
				},
				complete() {
					uni.stopPullDownRefresh();
				}
			});
		}
	}
};
</script>

<style>
.mg-top-20 {
	margin-top: 20rpx;
}
.mg-top-40 {
	margin-top: 40rpx;
}
.pd-bottom-40 {
	padding-bottom: 40rpx;
}
.border-r-20 {
	border-radius: 20rpx;
}
.checkbox {
	width: 45rpx;
	height: 45rpx;
	border: solid 1rpx #999;
	border-radius: 100%;
	text-align: center;
	line-height: 45rpx;
}
.checkbox-activite {
	background: linear-gradient(270deg, #ef7d4e, #ec5249);
	border-color: #ec5249;
}
.v-edit {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	background-color: #007aff;
	color: #fff;
	height: 110rpx;
	width: 110rpx;
	font-size: 32rpx;
	letter-spacing: 4rpx;
	margin: 0 20rpx;
}
.v-del {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	background-color: #ff0000;
	color: #fff;
	height: 110rpx;
	width: 110rpx;
	font-size: 32rpx;
	letter-spacing: 4rpx;
	margin: 0 20rpx;
}
.v-mark {
	background-color: rgba(0, 0, 0, 0.6);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 20rpx;
	animation-name: example;
	animation-duration: 0.5s;
}

@keyframes example {
	from {
		left: 690rpx;
	}
	to {
		left: 0;
	}
}
</style>
